<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
</head>
<body class="childrenBody" style="background-color: #e2e2e2">
<!--<button data-method="setTop" class="layui-btn">多窗口模式，层叠置顶</button>-->

<script id="addDivTem" type="text/html">
    {{# for(var i = 0; i < d.length; i++){ }}
    <div class="layui-col-md2">
        <div class="layui-col-md2">
            <button type="button" class="layui-btn layui-btn-normal" style="border-radius:45px;">{{ d[i].name }}</button>
        </div>
        <div style="float: right">
            <span style="font-size: 12px">总能耗（KW）</span>
            <br>
            <span style="font-size: 16px">{{ d[i].value }}</span>
        </div>
    </div>
    <div class="layui-col-md1">&emsp;</div>
    {{# } }}
</script>

<div class="layui-row layui-col-space12">
    <div class="layui-col-md12">
        <div class="layui-row grid-demo">
            <div class="layui-col-md12 layui-card" >
                <div class="layui-card-header" style="width: 1000px;height: 100px">
                    <div class="layui-icon-chart" style="margin-left: 2.5%">
                        <span style="font-size: 18px">本月总能耗</span>
                    </div>
                    <div class="layui-card-body" id="addDiv">

                    </div>
                </div>
            </div>

            <div class="layui-col-md6 layui-card">
                <div class="layui-card-header">
                    <div class="layui-icon-chart" style="margin-left: 2.5%">
                        <i class="layui-icon" style="font-size: 40px; color: #1E9FFF;">&#xe62c;</i>
                        <span style="font-size: 18px">&emsp;环境&emsp;&emsp;</span>
                    </div>
                </div>
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div id="main2" class="layui-card-body" style="width: 500px;height:400px;"></div>
            </div>
            <div class="layui-col-md6 layui-card" id="div1">
                <div class="layui-card-header">
                    <div class="layui-icon-chart" style="margin-left: 2.5%">
                        <i class="layui-icon" style="font-size: 40px; color: #1E9FFF;">&#xe62c;</i>
                        <span style="font-size: 18px">&emsp;设备&emsp;&emsp;</span>
                    </div>
                </div>
                <div class="layui-card-body" style="height: 400px;">
                    <!--数据表格-->
                    <table class="layui-hide" id="test"></table>
                </div>
            </div>
            <div class="layui-col-md12 layui-card">
                <div class="layui-card-header">
                    <div class="layui-icon-chart" style="margin-left: 2.5%">
                        <i class="layui-icon" style="font-size: 40px; color: #1E9FFF;">&#xe62c;</i>
                        <span style="font-size: 18px">&emsp;教室总能耗&emsp;&emsp;</span>
                        <div class="layui-inline" style="width: 25%">
                            <div class="layui-input-inline" style="width: 75%">
                                <input type="text" class="layui-input test-item" id="select" placeholder=" - " value="请选择你需要的时间段!">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div id="main" class="layui-card-body" style="width: 1000px;height:400px;"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script src="../../layui/lay/modules/laytpl.js"></script>
<script type="text/javascript" src="deviceStat.js"></script>
</body>
</html>